const { default: styled } = require("styled-components");

const PlayerWarrper = styled.div`
  height: 65px;
  width: 100%;
  min-width: 980px;
  position: relative;
  background-color: var(--themeColorv1);
  color: var(--themeFontColor);
  display: flex;
  box-sizing: border-box;
  padding: 0 50px;
  align-items: center;

  .left {
    flex: 1;
    text-align: left;
    position: relative;
    cursor: pointer;
    .songInfo {
      display: flex;
      .info {
        margin-top: -4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        margin-left: 10px;
  
        .info-icon {
          display: flex;
          .ic {
            margin-right: 10px;
            color: rgb(145, 145, 146);
          }
        }
      }
    }
    &:hover .left_cover {
      color: white;
      opacity: 1;
    }
    .left_cover {
      display: flex;
      opacity: 0;
      border-radius: 3px;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 50px;
      height: 50px;
    }
    .img {
      width: 50px;
      height: 50px;
    }
  }
  .center {
    width: 200px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    .sound {
      position: relative;
      display: flex;
      align-items: center;
      a{
        display: flex;
        align-items: center;
        color: black;
      }
      .lt {
        &:hover{
          color: rgb(30, 208, 164);
        }
      }
      .control-sound{
        position: absolute;
        top: -205px;
        left: -5px;
        background-color: rgb(249,249,249);
        border-radius: 10px;
        width: 50px;
        height: 200px;
        z-index: 100;
        box-shadow: 2px 7px 10px 2px rgba(145, 145, 146,0.5);
        padding: 15px 0 25px;
        box-sizing: border-box;
        font-size: 15px;
        text-align: center;
        &::after{
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          border: 10px solid transparent;
          border-top-color: rgb(249,249,249);
          bottom: -20px;
        }
      }
    }
    .play-model {
      cursor: pointer;
      font-size: 18px;
      margin: 10px;
      position: relative;
      .model {
        position: absolute;
        z-index: 100;
        top: -130px;
        left: -55px;
        width: 130px;
        border-radius: 10px;
        background-color: white;
        padding: 3px;
        box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
        .mi {
          margin-right: 10px;
        }
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-top-color: white;
        }
        li {
          font-size: 12px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.2);
          text-align: center;
          padding: 10px;
          border-radius: 2px;
          &:hover {
            background-color: rgba(0, 0, 0, 0.1);
          }
          &:last-child {
            border-bottom: 0px;
          }
        }
        &:hover {
          color: black;
        }
      }
      & .icon:hover {
        color: rgb(50, 238, 194);
      }
    }
    .lt {
      font-size: 18px;
      margin: 10px;
    }
    .lp,
    .lr {
      user-select: none;
      cursor: pointer;
      &:hover {
        color: rgb(30, 208, 164);
      }
    }
    .lp2,
    .lr2 {
      color: gray;
    }
    .play {
      font-size: 40px;
      color: rgb(30, 208, 164);
      margin: 0 10px;
      cursor: pointer;
      &:hover {
        color: rgb(50, 238, 194);
      }
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    flex: 1;
    .tabs {
      cursor: pointer;
      &:hover {
        color: rgb(30, 208, 164);
      }
    }
  }
  .payl-tabs {
    position: fixed;
    right: 0;
    top: 0;
    width: 30vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    transition: all 0.3s;
    transform: translateX(${(props) => props?.positionRight}vh);
  }
 
  
`;

export default PlayerWarrper;
